<template>
  <el-dialog class="public-dialog" :title="title" :width="width" :modelValue="modelValue" @close="handleClose" draggable align-center append-to-body>
    <div>
      <div class="grid grid-cols-4 py-[8px]" v-if="infoColumn.length">
        <VText v-for="item in infoColumn" :key="item.value" :title="item.label" :value="info[item.value]" line="1" />
      </div>
      <vxe-grid v-bind="gridOptions" ref="tableRef" />
      <div v-if="tips" class="flex text-[12px] text-[#9DA1AD] leading-[17px] whitespace-pre-wrap">
        <span class="flex flex-shrink-0 mr-[2px]">图标</span>
        <div v-html="tips" />
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button type="primary" @click="handleClose"> {{ closeText }} </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import XForm from "@/components/XForm/index.vue"
import { nextTick } from "vue"
const props = defineProps({
  title: { type: String, default: "" },
  width: { type: String, default: "1000" },
  info: { type: Object, default: null },
  infoColumn: { type: Array, default: () => [] },
  tableOptions: {
    type: Object,
    default: () => ({
      border: true,
      columns: [],
      data: [],
    }),
  },

  modelValue: { type: Boolean, default: false },
  tips: { type: String, default: "" },

  api: { type: Function, default: null }, // 接口
  params: { type: Object, default: () => ({}) }, // 请求参数

  closeText: { type: String, default: "确认" },
})

const emit = defineEmits(["update:modelValue", "submit"])
const tableRef = ref()

const gridOptions = ref({})
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      gridOptions.value = props.tableOptions
      if (props.api) {
        setApi()
      }
    }
  }
)
const setApi = () => {
  gridOptions.value.proxyConfig = {
    autoLoad: false,
    ajax: {
      query: async () => {
        let { data } = await props.api(props.params)
        return data || []
      },
    },
  }
  nextTick(() => {
    tableRef?.value?.commitProxy("reload")
  })
}

const handleClose = () => {
  emit("update:modelValue", false)
  setTimeout(() => {
    gridOptions.value = {}
  }, 100)
}

// const formOptions = {
//   labelPosition: 'top',
// }
</script>
